<template>
	<!-- Main content -->
	<section class='content'>
		<div class="box box-default">
			<div class="box-header with-border form-horizontal">
				<div class="row">
					<div class="col-md-4">
						<div class="form-group">
							<label class="col-md-4 control-label">订单信息</label>
							<div class="col-md-8">
								<input class="form-control" placeholder="订单信息">
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="form-group">
							<label class="col-md-4 control-label">姓名</label>
							<div class="col-md-8">
								<input class="form-control" placeholder="姓名">
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="form-group">
							<label class="col-md-4 control-label">手机</label>
							<div class="col-md-8">
								<input class="form-control" placeholder="手机">
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-4">
						<div class="form-group">
							<label class="col-md-4 control-label">申请时间</label>
							<div class="col-md-8 form-inline">
								<div class="time_field">
									<span class="date"><input class="form-control"></span>
									<span class="break">至</span>
									<span class="date"><input class="form-control"></span>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="form-group">
							<label class="col-md-4 control-label">金额</label>
							<div class="col-md-8">
								<input class="form-control" placeholder="金额">
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="form-group">
							<label class="col-md-4 control-label">还款状态</label>
							<div class="col-md-8 checkbox">
								<label>
									<input type="checkbox">还款中
								</label>
								<label>
									<input type="checkbox">已还款
								</label>
							</div>
						</div>
					</div>
				</div>
				<div class="text-right">
					<button class="btn btn-default search_btn">搜索</button>
				</div>
			</div>

			<div class="box-body">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>订单信息</th>
							<th>姓名</th>
							<th>手机号</th>
							<th>申请时间</th>
							<th>金额</th>
							<!--<th>分期方式</th>-->
							<th>还款状态</th>
							<th>还款详情</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="order in fOrders">
							<td>{{order['id']}}</td>
							<td>{{order['username']}}</td>
							<td>{{order['phone']}}</td>
							<td>{{order['createtime'] | time}}</td>
							<td>{{order['totalAmount']}}</td>
							<td>{{order['repaymentPlan'] | finishStatus}}</td>
							<td><a @click="check(order)">查看</a></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="box-footer">
			</div>
		</div>
		<div class="layer_custom_container layer_check_container" style="display:none">

			<table class="table table-hover">
				<thead>
				<tr>
					<th>期数</th>
					<th>还款金额</th>
					<th>应还款日</th>
					<th>状态</th>
					<th>还款日期</th>
				</tr>
				</thead>
				<tbody>
				<tr v-for="plan in cOrder['repaymentPlan']">
					<td>{{plan['periods']}}期</td>
					<td>{{plan['repaymentMount']}}</td>
					<td>{{plan['repaymentDate'] | time}}</td>
					<template>
						<td v-if="plan['repaymentStatus']=='norepayment'">未还款</td>
						<td v-else="plan['repaymentStatus']=='repaymented'">已还款</td>
					</template>
					<td>{{plan['repaymentTime']}}</td>
				</tr>
				</tbody>
			</table>

		</div>
	</section>

	<!-- /.content -->
</template>

<script type="text/ecmascript-6">
	import { mapGetters } from 'vuex'
	export default{
		data(){
			return {
				layer:{
					manage:'',
					check:''
				},
				cOrder:{
					//某一订单的全部相关信息
					order:{},
					userInfo:{},
					installment:{},
					repaymentPlan:[],
				},
				//做过虑用的
				fOrders:[

				]

			}
		},
		filters:{
			finishStatus(repaymentPlan){
				if(repaymentPlan){
					let isFinish=true;
					repaymentPlan.forEach(function(plan){
						console.log(plan['repaymentStatus'])
						if(plan['repaymentStatus']!='repaymented'){
							isFinish=false;
						}
					})
					if(isFinish){
						return '已还清'
					}else{
						return '还款中'
					}
				}
			}
		},
		computed:{
			...mapGetters([
				'orders',
			]),
			repaymentFinish(){

			}
		},
		methods:{
			queryOrder(order){
				this.cOrder['order']=order;
				this.$store.dispatch('fetchOrderUserInfo',{userId:order['userId']}).then((info)=>{
					this.cOrder['userInfo']=info;
				})
				this.$store.dispatch('fetchOrderInstallment',{id:order['instalmentTypeId']}).then((info)=>{
					this.cOrder['installment']=info;
				})
				this.$store.dispatch('fetchOrderRepaymentPlan',{orderId:order['id']}).then((info)=>{
					this.cOrder['repaymentPlan']=info;
				})
			},
			check(order){
				this.queryOrder(order);
				setTimeout(()=>{
					console.obj(this.cOrder)
				},1000)
				this.layer.check=layer.open({
					type: 1,
					area: ['400px','400px'],
					title: '还款计划',
					scrollbar: false,
					id: 'check',
					content:$('.layer_check_container'),
				})
			},
			search(){

			}
		},
		mounted(){
			this.$store.dispatch('fetchOrder').then(()=>{
				let orders=JSON.parse(JSON.stringify(this.orders));
				this.fOrders=orders.filter(function(order){
					let flag=(order['mark']=='A'||order['approvalConclusion']===1);
					return flag;
				})
				this.fOrders.forEach((fOrder)=>{
					this.$store.dispatch('fetchOrderRepaymentPlan',{orderId:fOrder['id']}).then((info)=>{
						//console.log(this.fOrders)
						this.$set(fOrder,'repaymentPlan',info)
					})
				})
			})
			this.$nextTick(function () {
			})
		},
		beforeDestroy(){
			//用户使用输入路由跳页的时候
			layer.close(this.layer.manage);
			layer.close(this.layer.check);
		}
	}
</script>
<style>
	.info-box {
		cursor: pointer;
	}

	.info-box-content {
		text-align: center;
		vertical-align: middle;
		display: inherit;
	}

	.fullCanvas {
		width: 100%;
	}
</style>
